$(function (){
    // 1.1 获取裁剪区域的 DOM 元素
    var layer =layui.layer;
var $image = $('#image')
// 1.2 配置选项
const options = {
  // 纵横比
  aspectRatio: 1,
  // 指定预览区域
  preview: '.img-preview'
}

// 1.3 创建裁剪区域
$image.cropper(options)

$('#btn-touxiang').on('click',function(){
    console.log(1);
    $('#file').click()
    
})
$('#file').on('change',function(e){
   const fileist=e.target.files
    if(fileist.length===0){return layer.msg("请选择文件");}
    //1获取文件 2,转为路劲 3，渲染裁剪区域固定写法

   var file = e.target.files[0]
    var imgURL = URL.createObjectURL(file)
  // 3. 重新初始化裁剪区域
  $image
    .cropper('destroy') // 销毁旧的裁剪区域
    .attr('src', imgURL) // 重新设置图片路径
    .cropper(options) // 重新初始化裁剪区域
})
$('#queding').on('click', function(){
  var dataURL = $image
  .cropper('getCroppedCanvas', {
    // 创建一个 Canvas 画布
    width: 100,
    height: 100
  })
  .toDataURL('image/png')
  $.ajax({
    method: 'POST',
    url:'/my/update/avatar',
    data:{
      avatar: dataURL
    },
    success: function (res) {
      if (res.status !== 0) {return layer.msg('获取图片失败')}
      layer.msg('获取图片成功')
      window.parent.get()
    }
  })
})
})